<div id="wmd-preview" class="wmd-preview">
    <blockquote data-anchor-id="04mn" class="white-blockquote">
        <p>冰里残阳透余辉，破戎折戟战后归。谁言棋败势不回，就凭风影亦要飞。</p>
    </blockquote>
    <h3 data-anchor-id="wiak" id="用法">用法</h3>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="z2im"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="pln">selector </span><span class="pun">[,</span><span class="pln"> </span><span class="pun">{...}]);</span></code></li></ol></pre>
    <p data-anchor-id="ywsl">selector是容器，可以是id选择器字符串<code>#wrapper</code>，也可以是dom对象<code>document.getElementById('wrapper')</code>，第二个参数是可选对象，该参数内容决定了创建一个怎样的JRoll对象
        <br> 例：创建一个带滚动条兼可回弹的滚动对象
    </p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="sbhn"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">scrollBarY</span><span class="pun">:</span><span class="kwd">true</span><span class="pun">,</span><span class="pln"> bounce</span><span class="pun">:</span><span class="kwd">true</span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="8mqo">保存了JRoll对象后，可动态对可选参数进行修改</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="5l1i"><ol class="linenums"><li class="L0"><code><span class="pln">jroll</span><span class="pun">.</span><span class="pln">options</span><span class="pun">.</span><span class="pln">bounce </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span></code></li></ol></pre>
    <p data-anchor-id="s15o">如上设置后将禁止jroll回弹</p>
    <div class="md-section-divider"></div>
    <h3 data-anchor-id="jaju" id="可选参数">可选参数</h3>
    <table data-anchor-id="xa9q" class="table table-striped-white table-bordered">
        <thead>
            <tr>
                <th>可选值</th>
                <th style="text-align:center;">默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
			<tr>
                <td>id <span style="color:#da020c">[新]</span></td>
                <td style="text-align:center;"></td>
                <td>id，jroll对象的唯一标记，建议手动提供id，方便在全局JRoll.jrollMap访问指定jroll对象，不提供时系统自动创建。</td>
            </tr>
            <tr>
                <td>scroll</td>
                <td style="text-align:center;">true</td>
                <td>使能滑动</td>
            </tr>
            <tr>
                <td>scrollX</td>
                <td style="text-align:center;">true</td>
                <td>使能横向滑动</td>
            </tr>
            <tr>
                <td>scrollY</td>
                <td style="text-align:center;">true</td>
                <td>使能竖向滑动</td>
            </tr>
            <tr>
                <td>scrollFree</td>
                <td style="text-align:center;">false</td>
                <td>使能自由滑动，默认情况下，x方向在滑动时，y方向不能滑动，相反亦然，如果应用于对图片进行放大滑动，可将此参数设为true，如果此参数设为true，请务必将bounce设为false，否则将影响滑动效果</td>
            </tr>
            <tr>
                <td>zoom</td>
                <td style="text-align:center;">false</td>
                <td>使能缩放</td>
            </tr>
            <tr>
                <td>zoomMin</td>
                <td style="text-align:center;">1</td>
                <td>最小缩放倍数</td>
            </tr>
            <tr>
                <td>zoomMax</td>
                <td style="text-align:center;">4</td>
                <td>最大缩放倍数</td>
            </tr>
            <tr>
                <td>bounce</td>
                <td style="text-align:center;">false</td>
                <td>使能回弹</td>
            </tr>
            <tr>
                <td>scrollBarX</td>
                <td style="text-align:center;">false</td>
                <td>开启x滚动条，若将此参数设为字符串，例scrollBarX:'custom'，可对滚动条样式进行自定义</td>
            </tr>
            <tr>
                <td>scrollBarY</td>
                <td style="text-align:center;">false</td>
                <td>开启y滚动条，与scrollBarX类似用法</td>
            </tr>
            <tr>
                <td>scrollBarFade</td>
                <td style="text-align:center;">false</td>
                <td>开启滚动条的渐隐模式</td>
            </tr>
            <tr>
                <td><del>stopPropagation</del></td>
                <td style="text-align:center;"><del>false</del></td>
                <td><del>禁止事件冒泡</del><span style="color:#da020c">(废弃)</span></td>
            </tr>
            <tr>
                <td>preventDefault</td>
                <td style="text-align:center;">true</td>
                <td>禁止touchmove默认事件，默认为true，当preventDefault为false时有可能触发浏览器自带的左右滑动切换页面功能，而且像QQ手机浏览器(Android4.2)会出现无法滑动的奇葩现象，因此本站不建议将preventDefault设为false。</td>
            </tr>
            <tr>
                <td>momentum</td>
                <td style="text-align:center;">true</td>
                <td>滚动平滑过渡，如果设为false，手指释放后将马上停止滑动</td>
            </tr>
            <tr>
                <td>autoStyle</td>
                <td style="text-align:center;">true</td>
                <td>为<strong>wrapper</strong> 和<strong>scroller</strong>（<strong>wrapper</strong> 的第一个子元素）添加样式，默认如果<strong>wrapper</strong> 的position为<em>static</em>，将被修改成<em>relative</em>，并将overflow设为<em>hidden</em>，<strong>scroller</strong> 的min-height设为<em>100%</em></td>
            </tr>
            <tr>
                <td>g</td>
                <td style="text-align:center;">0.0008</td>
                <td>模拟重力加速度，g值越小，运动时间越长</td>
            </tr>
            <tr>
                <td>adjustTop</td>
                <td style="text-align:center;">190</td>
                <td>安卓手机输入表单时自动调整输入框位置，默认190，表示输入框距离顶部190px</td>
            </tr>
            <tr>
                <td>scroller</td>
                <td style="text-align:center;">wrapper的第一个子元素</td>
                <td>指定scroller，不可动态更改，可以是id选择器字符串<code>#scroller</code>，也可以是dom对象<code>document.getElementById('scroller')</code></td>
            </tr>
        </tbody>
    </table>
    <div class="md-section-divider"></div>
    <h3 data-anchor-id="x1qz" id="常用方法">常用方法</h3>
    <ul data-anchor-id="c75n">
        <li>refresh，当scroller或wrapper的高度发生变化时，需要用此方法对JRoll对象进行刷新</li>
    </ul>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="cuwf"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">);</span></code></li><li class="L1"><code><span class="pln">    </span><span class="com">//do something，例：动态修改scroller的内容，使scroller的高度发生变化</span></code></li><li class="L2"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">refresh</span><span class="pun">();</span></code></li></ol></pre>
    <ul data-anchor-id="6dqy">
        <li>scrollTo，该方法用于移动scroller，共三个参数，第一个参数是x偏移量（必填），第二个是y偏移量（必填），第三个是滑动时间（可选，单位ms)，如果想获取当前x,y偏移量，可直接输出<code>jroll.x</code>和<code>jroll.y</code></li>
    </ul>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="te8p"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">);</span></code></li><li class="L1"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">scrollTo</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="pun">-</span><span class="lit">100</span><span class="pun">,</span><span class="pln"> </span><span class="lit">200</span><span class="pun">);</span></code></li></ol></pre>
    <div class="md-section-divider"></div>
    <ul data-anchor-id="r94k">
        <li>refresh和scrollTo方法在1.0.7版本以后支持链式调用</li>
    </ul>
    <pre class="prettyprint linenums prettyprinted" data-anchor-id="ohp4"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">refresh</span><span class="pun">().</span><span class="pln">scrollTo</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">);</span></code></li></ol></pre>
    <div class="md-section-divider"></div>
	<ul data-anchor-id="gnui"><li>enable，使能滑动，支持链式调用</li></ul>
	<div class="md-section-divider"></div>
	<pre class="prettyprint linenums prettyprinted" data-anchor-id="lp3m"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">enable</span><span class="pun">();</span></code></li></ol></pre>
	<ul data-anchor-id="92te"><li>disable，使不能滑动，支持链式调用</li></ul>
	<div class="md-section-divider"></div>
	<pre class="prettyprint linenums prettyprinted" data-anchor-id="orin"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">disable</span><span class="pun">();</span></code></li></ol></pre>
	<ul data-anchor-id="0mc0"><li>destroy，销毁jroll对象</li></ul>
	<div class="md-section-divider"></div>
	<pre class="prettyprint linenums prettyprinted" data-anchor-id="2b4b"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">destroy</span><span class="pun">();</span></code></li></ol></pre>
	
	<ul data-anchor-id="0mj0"><li>scale <span style="color:#da020c">[新]</span>，缩放，支持链式调用</li></ul>
	<div class="md-section-divider"></div>
	<pre class="prettyprint linenums prettyprinted" data-anchor-id="2b4b"><ol class="linenums"><li class="L1"><code><span class="pln">    </span><span class="com">//放大1.5倍，只接受一个整型/浮点型参数</span></code></li><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">scale</span><span class="pun">(1.5);</span></code></li></ol></pre>
	
	<ul data-anchor-id="lp1l"><li>call，在滑动时中转移对象，返回转移给的对象</li></ul>
	<div class="md-section-divider"></div>
	<pre class="prettyprint linenums prettyprinted" data-anchor-id="alwc"><ol class="linenums"><li class="L0"><code><span class="com">/* 例：</span></code></li><li class="L1"><code><span class="com"> * jroll1在外层，包裹jroll2</span></code></li><li class="L2"><code><span class="com"> * jroll2在滑动到达指定条件时将滚动权交给jroll1</span></code></li><li class="L3"><code><span class="com"> */</span></code></li><li class="L4"><code><span class="kwd">var</span><span class="pln"> pos</span><span class="pun">;</span></code></li><li class="L5"><code><span class="kwd">var</span><span class="pln"> jroll1 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">bounce</span><span class="pun">:</span><span class="kwd">true</span><span class="pun">});</span></code></li><li class="L6"><code><span class="kwd">var</span><span class="pln"> jroll2 </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#inner"</span><span class="pun">,</span><span class="pln"> </span><span class="pun">{</span><span class="pln">bounce</span><span class="pun">:</span><span class="kwd">true</span><span class="pun">});</span></code></li><li class="L7"><code><span class="pln">    jroll2</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scrollStart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L8"><code><span class="pln">        pos </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">y</span><span class="pun">;</span></code></li><li class="L9"><code><span class="pln">    </span><span class="pun">});</span></code></li><li class="L0"><code><span class="pln">    jroll2</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scroll"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">((</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">y</span><span class="pun">-</span><span class="pln">pos </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> pos </span><span class="pun">===</span><span class="pln"> </span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">y</span><span class="pun">-</span><span class="pln">pos </span><span class="pun">&lt;</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="pun">&amp;&amp;</span><span class="pln"> pos </span><span class="pun">===</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">maxScrollY</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L2"><code><span class="pln">            jroll2</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="pln">jroll1</span><span class="pun">,</span><span class="pln"> e</span><span class="pun">);</span><span class="pln"> </span><span class="com">//返回jroll1</span></code></li><li class="L3"><code><span class="pln">        </span><span class="pun">}</span></code></li><li class="L4"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
	
	
    <h3 data-anchor-id="0wu1" id="滑动事件">滑动事件</h3>
    <p data-anchor-id="cuwf">JRoll一共提供7个滑动事件，每个事件都可多次添加行为</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="rns9"><ol class="linenums"><li class="L0"><code><span class="kwd">var</span><span class="pln"> jroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">JRoll</span><span class="pun">(</span><span class="str">"#wrapper"</span><span class="pun">);</span></code></li></ol></pre>
    <p data-anchor-id="e934">Ⅰ. scrollStart，滑动开始时执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="t52o"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scrollStart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">x</span><span class="pun">);</span><span class="pln"> </span><span class="com">//输出当前x偏移量，this指向jroll对象</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="xp91">Ⅱ. scroll，滑动过程中执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="z41a"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scroll"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="9wir">Ⅲ. scrollEnd，滑动结束时执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="2uox"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"scrollEnd"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="bdoa">Ⅳ. zoomStart，开始缩放时执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="p2qj"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"zoomStart"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="pyap">Ⅴ. zoom，缩放过程中执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="fgrg"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"zoom"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
    <p data-anchor-id="evsy">Ⅵ. zoomEnd，缩放结束后执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="xym7"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"zoomEnd"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//该干嘛干嘛去...</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
	<p data-anchor-id="e9hx">VII.refresh，刷新后执行</p>
    <div class="md-section-divider"></div><pre class="prettyprint linenums prettyprinted" data-anchor-id="hxmf"><ol class="linenums"><li class="L0"><code><span class="pln">    jroll</span><span class="pun">.</span><span class="pln">on</span><span class="pun">(</span><span class="str">"refresh"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span></code></li><li class="L1"><code><span class="pln">        </span><span class="com">//干你的事去</span></code></li><li class="L2"><code><span class="pln">    </span><span class="pun">});</span></code></li></ol></pre>
</div>
